<!doctype html>
<html lang="en">

<head>
	<meta charset="utf-8" />
	<title>忘记密码</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description" />
	<meta content="Coderthemes" name="author" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />

	<!-- App favicon -->
	<link rel="shortcut icon" href="assets/images/favicon.ico">

	<!-- App css -->
	<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
	<link href="assets/css/icons.css" rel="stylesheet" type="text/css" />
	<link href="assets/css/metismenu.min.css" rel="stylesheet" type="text/css" />
	<link href="assets/css/style.css" rel="stylesheet" type="text/css" />
	<link rel="stylesheet" type="text/css" href="assets/css/custom.css" />

	<script src="assets/js/modernizr.min.js"></script>

</head>

<body class="account-pages">

	<!-- Begin page -->
	<div class="wrapper-page account-page-full">

		<div class="card">
			<div class="card-block">

				<div class="account-box">

					<div class="card-box p-5">
						<h2 class="text-uppercase text-center pb-4">
							<a href="index.html" class="text-success">
								<span><img src="assets/images/logo.png" alt="" height="26"></span>
							</a>
						</h2>

						<div class="text-center m-b-20">
							<p class="text-muted m-b-0">输入你的用户名和手机号，我们会发送验证码到你的短信，然后请你输入验证码以此验证你的身份 </p>
						</div>

						<form class="form-horizontal" action="#">
							<!-- οnsubmit="return checkPw()" -->
							<div class="form-group row m-b-20">
								<div class="col-12" id="loginName-valid">
									<label for="loginName">用户名</label>
									<input class="form-control" type="text" id="loginName" name="loginName"
										placeholder="">
								</div>
							</div>

							<div class="form-group row m-b-20">
								<div class="col-12" id="phoneNumber-valid">
									<label for="phoneNumber">手机号</label>
									<input class="form-control" type="text" id="phoneNumber" name="phoneNumber"
										placeholder="">
								</div>
							</div>

							<div class="form-group row m-b-20">
								<div class="col-7">
									<label for="clientCode">验证码</label>
									<input class="form-control" type="text" id="clientCode" name="clientCode"
										placeholder="输入5位验证码">
								</div>
								<div class="col-5">
									<label for="">&nbsp;</label>
									<button class="btn btn-block btn-success waves-effect waves-light" id="valibtn"
										type="button" onclick="sendValidCode()">发送验证码</button>
								</div>
							</div>

							<div class="form-group row m-b-20">
								<div class="col-12">
									<label for="password">新密码</label>
									<input class="form-control" type="password" name="password" id="password"
										placeholder="请输入新密码">
								</div>
							</div>

							<div class="form-group row m-b-20">
								<div class="col-12" id="repeatPassword-valid">
									<label for="repeatPassword">再次输入密码</label>
									<input class="form-control" type="password" id="repeatPassword"
										placeholder="请再次输入密码">
								</div>
							</div>

							<div class="form-group row text-center m-t-10">
								<div class="col-12" id="submit-valid">
									<button class="btn btn-block btn-custom waves-effect waves-light" id="submit"
										type="submit">重设密码</button>
								</div>
							</div>

						</form>

						<div class="row m-t-50">
							<div class="col-sm-12 text-center">
								<p class="text-muted">回到 <a href="login.html" class="text-dark m-l-5"><b> 登录</b></a></p>
							</div>
						</div>

					</div>
				</div>

			</div>
		</div>

		<div class="m-t-90 text-center">
			<p class="account-copyright">2018 © Highdmin. - Coderthemes.com</p>
		</div>

	</div>

	<!-- jQuery  -->
	<script src="assets/js/jquery.min.js"></script>
	<script src="assets/js/bootstrap.bundle.min.js"></script>
	<script src="assets/js/metisMenu.min.js"></script>
	<script src="assets/js/waves.js"></script>
	<script src="assets/js/jquery.slimscroll.js"></script>

	<!-- App js -->
	<script src="assets/js/jquery.core.js"></script>
	<script src="assets/js/jquery.app.js"></script>
	<script src="assets/js/custom.js" type="text/javascript" charset="utf-8"></script>

	<!-- 表单验证 -->
	<script src="plugins/jquery.form.js/jquery.form.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="plugins/jquery.validation.1.14.0/jquery.validate.js" type="text/javascript" charset="utf-8"></script>
	<script src="plugins/jquery.validation.1.14.0/validate-methods.js" type="text/javascript" charset="utf-8"></script>
	<script src="plugins/jquery.validation.1.14.0/messages_zh.js" type="text/javascript" charset="utf-8"></script>
	<!-- bootstrap-select -->
	<script src="plugins/bootstrap-select/js/bootstrap-select.js" type="text/javascript" charset="utf-8"></script>

	<!-- layer插件 -->
	<script src="plugins/layer2.4/layer.js" type="text/javascript" charset="utf-8"></script>
	<!-- 星空背景 -->
	<script src="assets/js/background.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		
		$(function () {
			//表单验证
			$("form").validate({
				rules: {
					clientCode: {
						required: true,
						number: true,
						maxlength: 5,
						minlength: 5,
					},
					phoneNumber: {
						number: true,
						required: true,
					},
					loginName: {
						required: true,
					},
					password: {
						required: true,
					},
					repeatPassword: {
						required: true,
					}
				},
				onkeyup: false,
				focusCleanup: true,
				success: "valid",
				submitHandler: function (form) {
					$(form).ajaxSubmit({
						type: "POST",
						url: URL + "person/password/update2",
						beforeSend: function () {
							// console.log($('form').serializeObject())
							if ($('#password').val() != $('#repeatPassword').val()) {
								label = $('<label id="err" class="error" for="" style="">两次输入密码不同！</label>')
								$("#repeatPassword-valid").append(label)
								return false
							} else {
								$("err").remove()
							}
						},
						success: function (data) {
							// console.log(data)
							if (data.status == 0) {
								layer.confirm('密码更改失败,请确认填写的资料正确!', {
									btn: ['确定'],
									btn1: function () {
										layer.closeAll()
									}
								});
							} else {
								parent.layer.msg('修改密码成功！，即将回到登录页面');
								setTimeout(function () {
									window.location.pathname = "login.html"
								}, 1000);
							}


						},
						error: function (XMLHttpRequest, textStatus, errorThrown) {
							networkError(XMLHttpRequest, textStatus, errorThrown)
						}
					});
				}
			});
		});

		// function checkPw() {
		// 	var result = true
		// 	if (('#password').val() != ('#repeatPassword').val()) {

		// 		result = false
		// 	}
		// 	return result
		// }

		$("#loginName").blur(function () {
			//查看当前用户是否存在
			$.ajax({
				type: "POST",
				url: URL + '/person/check/username',
				async: false,
				dataType: "json",
				data: { "username": $("#loginName").val() },
				success: function (data) {
					if (data.status == 0) {
						label = $('<label id="err" class="error" for="loginName" style="">当前用户不存在！</label>')
						$("#loginName-valid").append(label)
						$("#submit").attr("disabled", true)
					} else {
						$("err").remove()
						$("#submit").removeAttr('disabled');
					}

				},
				error: function (XMLHttpRequest, textStatus, errorThrown) {
					networkError(XMLHttpRequest, textStatus, errorThrown)
				}
			});
		})

		function sendValidCode() {
			//发送验证码
			phoneNumber = $("#phoneNumber").val()
			if (phoneNumber == "") {
				layer.msg("请输入手机号！")
				return
			}
			$.ajax({
				type: "POST",
				url: URL + '/person/createServerCodeForSecret',
				async: false,
				dataType: "json",
				data: {
					"phoneNumber": phoneNumber
				},
				success: function (data) {
					$("#valibtn").attr("disabled")
					var count = 60;
					const countDown = setInterval(function () {
						if (count === 0) {
							$("#valibtn").text('重新发送').removeAttr('disabled');
							clearInterval(countDown);
						} else {
							$("#valibtn").attr("disabled", true)
							$("#valibtn").text(count + '秒后可重新获取');
						}
						count--;
					}, 1000);
				},
				error: function (XMLHttpRequest, textStatus, errorThrown) {
					networkError(XMLHttpRequest, textStatus, errorThrown)
				}
			});
		}
	</script>
</body>

</html>